.link {
  --link-color: color-mix(in oklab, var(--color-base-content) 80%, #0000);
  @apply inline-block cursor-pointer font-medium underline;
  color: var(--link-color);
  &:hover {
    color: color-mix(in oklab, var(--link-color) 80%, #000);
  }
  &:focus {
    @apply outline-none;
  }
  &:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
  &.disabled,
  &[disabled],
  &:disabled {
    @apply pointer-events-none opacity-50;
  }
}

.link:where(.link-hover) {
  @apply no-underline [@media(hover:hover)]:hover:underline;
}

.link:where(.link-animated) {
  @apply relative no-underline before:pointer-events-none before:absolute before:start-0 before:bottom-0 before:h-px before:w-full before:bg-current before:transition-transform before:duration-300 before:ease-in-out before:content-[''];
}

.link:where(.link-animated)::before {
  transform-origin: 100% 50%;
  transform: scale3d(0, 1, 1);
}

.link:where(.link-animated):hover::before {
  transform-origin: 0% 50%;
  transform: scale3d(1, 1, 1);
}

.link-primary {
  --link-color: var(--color-primary);
}
.link-secondary {
  --link-color: var(--color-secondary);
}
.link-accent {
  --link-color: var(--color-accent);
}
.link-neutral {
  --link-color: var(--color-neutral);
}
.link-success {
  --link-color: var(--color-success);
}
.link-info {
  --link-color: var(--color-info);
}
.link-warning {
  --link-color: var(--color-warning);
}
.link-error {
  --link-color: var(--color-error);
}
